<template>
  <div class="manage">
    <el-container>
      <el-header>
        <el-alert v-if="alertShow" title="小贴士：如果供应商没有收到您的邀请，您可以更换邮箱后再次邀请该供应商" type="info" show-icon @close="alertShow=false" />
        <div class="fast">
          <span>快速查询</span>
          <el-input placeholder="供应商" v-model="form.supplier"></el-input>
          <el-input placeholder="供应商邮箱" v-model="form.contact"></el-input>
          <el-button :icon="Search" type="primary">查询</el-button>
          <el-button :icon="RefreshRight" @click="reset">重置</el-button>
          <el-button :icon="MessageBox" >保存查询条件</el-button>
        </div>
      </el-header>
      <el-main>
        <div class="example-pagination-block-sx">
          <div class="example-demonstration">
            <el-button type="primary" :icon="Plus">新增</el-button>
          </div>
          <div class="demo-pagination-block">
            <el-pagination
              v-model:currentPage="param.pageNum"
              v-model:page-size="param.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            />
          </div>
        </div>
        <div class="mt10">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="supplierCompany" label="邀请的供应商名称" />
            <el-table-column prop="email" label="邀请的供应商邮箱"/>
            <el-table-column prop="createTime" label="邀请时间" />
            <el-table-column prop="email" label="是否已发送注册邮件/二维码" />
            <el-table-column prop="registerStatus" label="注册状态"></el-table-column>
            <el-table-column prop="address" label="操作" width="100" />
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {ref,reactive,toRefs,onMounted} from 'vue'
import {Search,MessageBox,RefreshRight,Plus} from '@element-plus/icons-vue'
import {getinvitationList} from "/@/api/linkoo/supplier/index"
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  setup(props) {
    let alertShow=ref(true)
    const disabled = ref(false)
    const background = ref(false)
    let state = reactive({
      form:{
        supplier:"",
        contact:""
      },
      tableData:[{date:'q',name:"w",address:'e'}],
      param:{
          pageNum:1,
          pageSize:10
      },
      total:50,
    })
    // 重置
    const reset=()=>{
      state.form={
        supplier:"",
        contact:""
      }
    }
    onMounted(()=>{
      getlist();
    })
    const getlist=()=>{
      getinvitationList(state.param).then((res)=>{
        console.log(res);
        if(res.code==0){
          state.total=res.data.total
          state.tableData=res.data.supplierInviteList
          console.log(state.tableData);
        }
      })
    }
    const activationitem =({row})=>{
      console.log(row);
      ElMessageBox.confirm(
        '确定修改状态?',
        '警告',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          ElMessage({
            type: 'success',
            message: '修改完成',
          })
        })
        .catch(() => {})
    }
    return{
      alertShow,
      Search,
      MessageBox,
      disabled,
      background,
      RefreshRight,Plus,
      ...toRefs(state),
      reset,
      getlist,
      activationitem
    }
  }
}
</script>

<style lang="scss" scoped>
.fast{
  display: flex;
  align-items: center;
  .el-input{
    width: 200px;
    margin: 10px;
  }
}
.example-pagination-block-sx{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-main{
  margin-top: 10px;
}
.mt10{
  margin-top: 10px;
}
</style>